```jsx
import * as pinInput from "@zag-js/pin-input"
import { normalizeProps, useMachine } from "@zag-js/solid"
import { createMemo, createUniqueId } from "solid-js"

export function PinInput() {
  const service = useMachine(pinInput.machine, { id: createUniqueId() })

  const api = createMemo(() => pinInput.connect(service, normalizeProps))

  return (
    <div>
      <div {...api().getRootProps()}>
        <input {...api().getInputProps({ index: 0 })} />
        <input {...api().getInputProps({ index: 1 })} />
        <input {...api().getInputProps({ index: 2 })} />
      </div>
      <button onClick={api().clearValue}>Clear</button>
    </div>
  )
}
```
